<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
</head>
<link href="__CDN__/assets/css/frontend.css?v=1627711211" rel="stylesheet">
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<!--引入 element-ui 的样式-->
<link rel="stylesheet" type="text/css" href="__CDN__/assets/js/vue/index.css">
<link rel="stylesheet" type="text/css" href="__CDN__/assets/js/vue/vant.css">
<!-- 引入vue  -->
<script src="__CDN__/assets/js/vue/vue.js"></script>
<!-- 引入element 组件库-->
<script src="__CDN__/assets/js/vue/index.js"></script>
<script src="__CDN__/assets/js/vue/vant.min.js"></script>
<!--swiper  -->
<link href="__CDN__/assets/libs/swiper-6.4.15/swiper-bundle.min.css" rel="stylesheet">
<script src="__CDN__/assets/libs/swiper-6.4.15/swiper-bundle.min.js"></script>
<style>
    .user_content{
        background-color: #5669F3;
        display: flex;
        flex-direction: column;
        padding-bottom: 5px;
        padding-top: 15px;
    }
    .user_content .user_info_view{
        width: 100%;
        height: 40%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        margin:10px 0 ;
    }
    .user_content .user_member_view{
        flex: 1;
        width: 90%;
        margin: 10px auto 0;
        display: flex;
        border-top: 1px solid #dfe2f2;
    }
    .user_content .user_member_view .item{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        color: #fff;
        position: relative;
        padding: 5px 0;
    }
    .user_content .user_member_view .item ~ .item::before{
        content:'';
        height: 45%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        border-left: 1px solid #dfe2f2;
    }

    body .van-tabs--line .van-tabs__wrap{
        height: 35px;
    }
    .van-tabs{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .van-tabs .van-tabs__content{
        flex: 1;
        overflow: hidden;
    }
    .van-tabs .van-tabs__content .van-tab__pane{
        height: 100%;
    }
    /* 订单列表 start */
    .order-list{
        height: 100%;
        overflow: auto;
        padding-top: 5px;
    }
    .order-list .order-item{
        background-color: #fff;
        margin-bottom: 5px;
    }
    .order-list .order-item .title_view{
        padding: 6px 15px;
        display: flex;
        align-items: center;
        border-bottom:1px solid #eeeded ;

    }
    .order-list .order-item .title_view .no{
        flex: 1;
        margin-right: 10px;
        word-break: break-all;
    }
    .order-list .order-item .title_view .actions{
        white-space: nowrap;
    }
    .order-list .order-item .main_view{
        min-height:40px ;
        padding: 0 15px 0;
        display: flex;
    }

    .order-list .order-item .main_view .left-part {
        flex: 1;
        justify-content: flex-start;
        text-align: left;
        overflow: hidden;
        margin-right: 5px;
    }
    .order-list .order-item .main_view .right-part{
        flex: 1;
        justify-content: flex-end;
        text-align: right;
        overflow: hidden;
        margin-left: 5px;
    }
    .order-list .order-item .main_view .info-item{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 6px;
        line-height: 19px;
    }
    .van-cell{
        padding: 6px 16px;
    }
    .van-password-input{
        margin: 0;
    }
    .van-password-input__security{
        height: 40px;
    }
    /* 订单列表 end */
</style>
<body>
<div id="app" style="max-width: 400px;margin: auto; height: 100%;width: 100%;display: none;">
    <div style="display:flex;flex-direction: column;height: 100%;">
        <div class="user_content">
            <!-- <van-search
            @search="handleSearch"
            background="#5669F3"
            v-model="queryForm.keyworld"
            placeholder="请输入手机号查询"
            input-align="center"
            ></van-search> -->
            <div class="user_info_view">
                <van-image
                        round
                        fit="cover"
                        width="20%"
                        :src="userInfo.image"
                ></van-image>
                <div class="txt_part" style="color: #fff;padding-left: 15px;word-wrap: break-word;
                        white-space: normal;
                        word-break: break-all;flex: 1;line-height: 1.6;font-size: 18px;">
                    <div class="name" >{{userInfo.name}}</div>
                    <div class="city">{{userInfo.city}}</div>
                </div>
                <!-- <div style="display: flex;flex-direction: column;color: #fff;align-items: center;    padding-left: 13px;border-left: 1px solid #dfe2f2;">
                    <van-icon name="manager-o" size="26"></van-icon>
                    <span>绑定</span>
                </div> -->
            </div>
            <div class="user_member_view">
                <div class="item">
                    <p style="line-height: 1.6;">{{amount}}</p>
                    <p>余额</p>
                </div>
                <div class="item">
                    <p style="line-height: 1.6;">{{coupon_free}}</p>
                    <p>免单券</p>
                </div>
                <div class="item">
                    <p style="line-height: 1.6;">{{jifen}}</p>
                    <p>积分</p>
                </div>
            </div>
        </div>
        <van-cell v-if="!is_bind" title="您还没有绑定手机号" is-link value="绑定手机号获取信息" style="background-color:#e0e4ff;padding: 3px 10px;" @click="phone_bind.show = true"></van-cell>
        <div style="flex: 1;overflow: hidden;">
            <van-tabs swipeable v-model="active" color="#5669F3" background="#fff">
<!--                <van-tab title="订单">-->
<!--                    <div style="height: 100%;">-->
<!--                        <div class="order-list">-->
<!--                            <template v-for="(order,index) in morder">-->
<!--                                <div class="order-item" @click="handleLook(order)">-->
<!--                                    <div class="title_view">-->
<!--                                        <div class="no">订单编号 : {{order.no}}</div>-->
<!--                                        <div class="actions">-->
<!--                                            <span>订单状态 : </span>-->
<!--                                            <van-tag type="warning" size="medium">{{order.status}}</van-tag>-->
<!--                                            &lt;!&ndash; <van-button :loading="order.loading" native-type="button" type="info" size="mini" @click="handleOrderEdit(order,index)">更改订单</van-button>-->
<!--                                            <van-button style="margin-left: 0;" native-type="button" type="danger" size="mini" @click="handleCancelOrder(order)">取消订单</van-button> &ndash;&gt;-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="main_view">-->
<!--                                        <div class="left-part">-->
<!--                                            <div class="info-item">-->
<!--                                                <strong>收货人: {{order.name}}</strong>-->
<!--                                            </div>-->
<!--                                            <div class="info-item">下单人</div>-->
<!--                                            &lt;!&ndash; <div class="info-item">收货地址</div> &ndash;&gt;-->
<!--                                            &lt;!&ndash; <div class="info-item">归属员工</div> &ndash;&gt;-->
<!--                                            <div class="info-item">下单日期</div>-->
<!--                                            <div class="info-item">订单总额: ￥{{Number(order.total)/100}}</div>-->
<!--                                        </div>-->
<!--                                        <div class="right-part">-->
<!--                                            <div class="info-item">-->
<!--                                                <strong>　{{order.cardno}}</strong>-->
<!--                                            </div>-->
<!--                                            <div class="info-item">　{{order.sname}}</div>-->
<!--                                            &lt;!&ndash; <div class="info-item">{{order.addr}}　</div> &ndash;&gt;-->
<!--                                            &lt;!&ndash; <div class="info-item">{{order.ioptr}}　</div> &ndash;&gt;-->
<!--                                            <div class="info-item">　{{order.ymd}}</div>-->
<!--                                            <div class="info-item">　实收金额: ￥{{Number(order.actual_total)/100}}</div>-->
<!--                                            <div class="info-item">-->

<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div style="padding: 0 15px 6px;">-->
<!--                                        <strong>收货地址 : {{order.addr}}</strong>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </template>-->

<!--                        </div>-->
<!--                    </div>-->
<!--                </van-tab>-->
                <van-tab title="查询记录">
                    <div style="height: 100%;overflow: auto;padding-top: 5px;">
                        <van-cell @click="handleSearch(item.tel)" is-link v-for="(item,index) in search_log.slice().reverse()" :key="'search_log_'+index" :title="'号码 : '+item.tel" :value="parseTime(item.time)"></van-cell>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
    <!-- 短信验证弹窗 -->
    <van-popup @closed="Object.assign(phone_bind,$options.data().phone_bind);" v-model="phone_bind.show" position="right" :style="{ 'height': '100%','width':'100%' }" closeable>
        <div style="padding:50px 10px 10px;overflow: auto;width: 100%;height: 100%;background-color: #e1e7ec;">
            <van-field
                    v-if="phone_bind.active == 0"
                    label-width="2em"
                    v-model="phone_bind.phone"
                    center
                    clearable
                    label="+86"
                    placeholder="请输入手机号"
            >
                <template #button>
                    <van-button @click="handleSend" size="small" type="primary">发送验证码</van-button>
                </template>
            </van-field>
            <div v-else>
                <div style="margin-bottom: 10px;">
                    验证码已发送至 <span style="color: #2D81FB;">(+86){{phone_bind.phone}}</span>
                </div>
                <van-password-input
                        style="margin: 0;"
                        :length="4"
                        :value="phone_bind.code"
                        :mask="false"
                        :focused="phone_bind.showKeyboard"
                        @focus="phone_bind.showKeyboard = true"
                ></van-password-input>
                <div style="display: flex;justify-content: end;padding-top: 10px;">
                    <div v-if="!phone_bind.flag" style="display: flex;" >
                        <span>重新获取(</span>
                        <van-count-down ref="count_down" :time="phone_bind.time" format="ss" @finish="phone_bind.flag = true"></van-count-down>
                        <span>)</span>
                    </div>
                    <span v-else style="color: #2D81FB;" @click="handleSend">重新获取</span>
                </div>
                <van-number-keyboard
                        v-model="phone_bind.code"
                        :show="phone_bind.showKeyboard"
                        @blur="phone_bind.showKeyboard = false"
                />
            </div>
        </div>
    </van-popup>
    <!-- 订单详情弹窗 -->
    <van-popup v-model="order_product.show" position="bottom" :style="{ 'min-height': '50%','max-height':'60%' }" >
        <div style="padding: 10px;overflow: auto;height: 100%;">
            <div>订单号 : {{order_product.morder.no}}</div>
            <div>收货人姓名 : {{order_product.morder.name}}</div>
            <div>订单备注 : {{order_product.morder.descrim}}</div>
            <div>运单号 : {{order_product.morder.snum}}</div>
            <h4 style="text-align: center;font-weight: bold;margin: 10px 0;">购物清单</h4>
            <div style="display: flex;border-top:1px solid #000 ;line-height: 1.8;">
                <div style="flex: 1;text-align: center;">序号</div>
                <div style="width:60%;text-align: center;">商品名称</div>
                <!-- <div style="flex: 1;text-align: center;">单价</div> -->
                <div style="flex: 1;text-align: center;">数量</div>
            </div>
            <template v-for="(item,index) in order_product.list">
                <div style="display: flex;border-top:1px solid #000 ;line-height: 1.8;">
                    <div style="flex: 1;text-align: center;">{{index+1}}</div>
                    <div style="width:60%;text-align: center;">{{item.productname}}</div>
                    <!-- <div style="flex: 1;text-align: center;">￥{{Number(item.price0)/100}}</div> -->
                    <div style="flex: 1;text-align: center;">{{item.amt}}</div>
                </div>
                <!-- <div style="border-bottom:1px solid #988d8d;padding-bottom: 5px;">
                    <div style="padding-bottom: 4px;">{{item.productname}}</div>
                    <div style="text-align: right; color: #ff0000;display: flex;justify-content: space-between;align-items: center;">
                        <span>￥{{Number(item.price0)/100}}</span>
                        <span>x{{item.amt}}</span>
                    </div>
                </div> -->
            </template>
            <div style="display: flex;border-top:1px solid #000 ;line-height: 1.8;" v-if="order_product.show">
                <div style="flex: 1;text-align: center;"></div>
                <div style="width:60%;text-align: right;padding-right: 8%;">小计</div>
                <!-- <div style="flex: 1;text-align: center;">{{order_product.list.reduce((total, num)=>{return num.price0})}}</div> -->
                <div style="flex: 1;text-align: center;">{{order_product.list.map(e=> e.amt).reduce((total, num)=>{return total+num})}}</div>
            </div>
            <div style="display: flex;border-top:1px solid #000 ;line-height: 1.8;text-align: right;" v-if="order_product.show">
                <div style="flex: 1;font-weight: bold;margin-top: 5px;">订单总金额{{Number(order_product.morder.total)/100}}</div>
            </div>
        </div>
    </van-popup>
</div>
</body>
</html>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    var require = {
        config: {
            "site":{"name":"\u4f73\u5bb6\u8bda\u54c1","cdnurl":"","version":Date.parse(new Date()),"timezone":"Asia\/Shanghai","languages":{"backend":"zh-cn","frontend":"zh-cn"}},
            "upload":{"cdnurl":"","uploadurl":"\/index\/ajax\/upload","bucket":"local","maxsize":"10mb","mimetype":"jpg,png,bmp,jpeg,gif,zip,rar,xls,xlsx,wav,mp4,mp3,pdf","chunking":false,"chunksize":2097152,"savekey":"\/uploads\/{year}{mon}{day}\/{filemd5}{.suffix}","multipart":[],"multiple":false,"storage":"local"},
            "modulename":"member",
            "controllername":"share",
            "actionname":"member",
            "jsname":"frontend\/share",
            "moduleurl":"\/index",
            "language":"zh-cn",
            "token":"c0f4e22a-8882-4c1b-a7d3-21a5805a1d94",
            "__PUBLIC__":"\/","__ROOT__":"\/","__CDN__":""}
    };
    var globalData=eval(<?php echo json_encode($msg);?>);
</script>

<script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1627711211"></script>